<template>
  <div>
    <h2 class="titleHeader">修改个人信息</h2>
    <div style="margin-bottom:10px"></div>
    <!-- 选择框 -->
    <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon>
              <Edit />
            </el-icon>
            <span>修改信息</span>
          </span>
        </template>
        <edit-message></edit-message>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>修改密码</span>
          </span>
        </template>
        <edit-password></edit-password>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script  lang="ts" setup>
import { Edit, EditPen } from '@element-plus/icons-vue'
import { defineAsyncComponent } from 'vue'
const EditMessage = defineAsyncComponent(() => import('@/components/center/EditMessage.vue'))
const EditPassword = defineAsyncComponent(() => import('@/components/center/EditPassword.vue'))
</script>


<style lang="scss">
.demo-tabs>.el-tabs__content {
  color: #6b778c;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>